<!--

    Copyright (C) 2015 The Gravitee team (http://gravitee.io)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<div class="gv-forms gv-forms-fluid" layout="column">
  <h1>Plans</h1>
  <div class="gv-form">
    <h2></h2>
    <div class="gv-form-content" layout="column">
      <div class="btn-group">
        <button
          class="btn btn-default"
          ng-class="{'active': $ctrl.selectedStatus.indexOf(statusFilter) !== -1}"
          ng-click="$ctrl.changeFilter(statusFilter)"
          type="button"
          ng-repeat="statusFilter in $ctrl.statusFilters"
          style="text-transform: capitalize"
        >
          {{statusFilter.toLowerCase()}} <span ng-if="$ctrl.countByStatus[statusFilter]">({{$ctrl.countByStatus[statusFilter]}})</span>
        </button>
      </div>

      <div layout="column" flex>
        <div layout="row" layout-align="center" layout-wrap class="plans">
          <div class="md-block" ng-repeat="plan in $ctrl.filteredPlans" layout="row" layout-align="center">
            <md-card class="gravitee-card gravitee-plan-box" style="min-width: 250px; max-width: 350px">
              <md-card-header>
                <md-toolbar class="md-menu-toolbar">
                  <div class="md-toolbar-tools">
                    <div layout="column">
                      <h4 ng-class="{italic: plan.status === 'STAGING', strike: plan.status === 'CLOSED'}">{{plan.name}}</h4>
                      <span style="font-size: 12px">Authentication: {{plan.security | lowercase}}</span>
                      <span ng-if="plan.general_conditions" style="font-size: 12px; margin-bottom: 1rem">With general conditions</span>
                      <span style="font-size: 12px" ng-if="plan.tags && plan.tags.length > 0">Deploy on: {{plan.tags.join(', ')}}</span>
                    </div>
                    <span flex></span>
                    <span ng-if="plan.status !== 'CLOSED'" permission permission-only="'api-plan-u'">
                      <md-tooltip md-direction="top">Configure plan</md-tooltip>
                      <ng-md-icon style="fill: grey" icon="mode_edit" ng-click="$ctrl.editPlan(plan)"></ng-md-icon>
                    </span>

                    <span ng-if="$ctrl.canDesign(plan)" permission permission-only="'api-plan-u'">
                      <md-tooltip md-direction="top">Design plan</md-tooltip>
                      <ng-md-icon style="fill: #6ba2c5" icon="palette" ng-click="$ctrl.design(plan)"></ng-md-icon>
                    </span>
                    <span ng-if="plan.status === 'STAGING'" permission permission-only="'api-plan-u'">
                      <md-tooltip md-direction="top">Publish plan</md-tooltip>
                      <ng-md-icon style="fill: #6ba2c5" icon="backup" ng-click="$ctrl.publish(plan)"></ng-md-icon>
                    </span>
                    <span ng-if="plan.status === 'PUBLISHED'" permission permission-only="'api-plan-u'">
                      <md-tooltip md-direction="top">Deprecate plan</md-tooltip>
                      <ng-md-icon style="fill: #d3772d" icon="portable_wifi_off" ng-click="$ctrl.deprecate(plan)"></ng-md-icon>
                    </span>
                    <span ng-if="plan.status !== 'CLOSED'" permission permission-only="'api-plan-u'">
                      <md-tooltip md-direction="top">Close plan</md-tooltip>
                      <ng-md-icon style="fill: #d3091d" icon="close" ng-click="$ctrl.close(plan)"></ng-md-icon>
                    </span>
                  </div>
                </md-toolbar>
              </md-card-header>
              <md-divider></md-divider>
              <md-card-content layout="column">
                <h4 class="gravitee-plan-content">{{plan.description}}</h4>
                <md-divider></md-divider>
                <div ng-if="plan.characteristics.length > 0">
                  <h5 class="gravitee-plan-content">Characteristics</h5>
                  <div class="gravitee-plan-content-div">
                    <gv-state ng-repeat="characteristic in plan.characteristics">{{characteristic}}</gv-state>
                  </div>
                  <md-divider></md-divider>
                </div>
                <div ng-if="plan.excluded_groups_names.length > 0">
                  <h5 class="gravitee-plan-content">Excluded groups</h5>
                  <div class="gravitee-plan-content-div">
                    <gv-state ng-repeat="excluded_group_name in plan.excluded_groups_names">{{excluded_group_name}}</gv-state>
                  </div>
                  <md-divider></md-divider>
                </div>
              </md-card-content>
              <md-divider ng-if="graviteeUser || plan.isPublic"></md-divider>
              <md-card-footer ng-if="graviteeUser || plan.isPublic">
                <div layout="row" layout-align="end">
                  <md-button
                    ng-if="plan.security !== 'KEY_LESS' || plan.security === undefined"
                    class="md-primary md-raised"
                    aria-label="Execute"
                    ng-click="subscribe(plan)"
                    ng-disabled="plan.status || planEdit"
                  >
                    {{plan.alreadySubscribed ? 'Subscribed' : (plan.validation === 'AUTO'?'Subscribe': 'Request for subscription')}}
                  </md-button>
                  <md-button
                    ng-if="plan.security === 'KEY_LESS'"
                    class="md-primary md-raised"
                    aria-label="Execute"
                    ng-click="subscribe(plan)"
                    ng-disabled="plan.status || planEdit"
                  >
                    No subscription required
                  </md-button>
                </div>
              </md-card-footer>
            </md-card>
          </div>
        </div>
        <div permission permission-only="'api-plan-u'" layout="row" layout-align="center" layout-wrap>
          <span ng-if="$ctrl.filteredPlans.length != 0 && $ctrl.dndEnabled"
            ><ng-md-icon icon="info" style="fill: #b1bdc5"></ng-md-icon> Plans can be re-ordered by dragging & dropping them.</span
          >
        </div>
      </div>

      <gravitee-empty-state
        ng-if="$ctrl.filteredPlans.length == 0"
        icon="view_week"
        model="Plan"
        message="Plans will appear here"
        sub-message="{{$ctrl.creationEmptyMessage}}"
        create-mode="true"
      ></gravitee-empty-state>
      <div
        permission
        permission-only="'api-plan-c'"
        ng-style="$ctrl.filteredPlans.length == 0 && {'text-align':'center'}"
        ng-if="!$ctrl.isApiDeprecated"
      >
        <md-button
          ng-class="{'md-fab-bottom-right': $ctrl.filteredPlans.length > 0}"
          class="md-fab"
          aria-label="Add"
          ng-click="$ctrl.addPlan()"
        >
          <ng-md-icon icon="add"></ng-md-icon>
        </md-button>
      </div>
    </div>
  </div>
</div>
